<template>
	<view class="draftItem border-box">
		<view @click.stop="details(item)">
			<view class="title flex align-item_center justify-content_space-between">{{props.item.title}}
				<view class="Recommended" v-if="props.item.recommend">荐</view>
			</view>
			<view class="time flex align-item_center justify-content_space-between">
				<view>
					{{dayjs(props.item.createTime).format('YYYY.MM.DD HH:mm:ss')}}
				</view>
				<view class="labor" v-if="props.item.field">{{props.item.field}}</view>
			</view>
			<view class="ds flex align-item_center justify-content_space-between">
				<view>{{props.item.content}}</view>
				<image v-if="props.showImg" class="rightMedia" mode="aspectFill" :src="item.fishImg.split(',')[0]"></image>
			</view>
			<view v-if='!props.showImg'>
				<view class="imgs" v-if="props.type === 'default'">
					<view class="flex" v-for="(item,index) in chunkArray([...togetherImg(props.item)],3)" :key="index"
						:class="{'justify-content_space-between':item.length>=3}">
						<view v-for="(child,childIndex) in item" :key="childIndex" @click.stop="preview(togetherImg(props.item))">
							<view class="flex align-item_center imgs-item"
								:style="{'margin-right':item.length<=2?props.right:'0',width:props.size,height:props.size}">
								<up-image :src="child" mode="aspectFill" :width="props.size" :height="props.size" radius='16rpx' />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="operation flex align-item_center justify-content_space-between" v-if="props.operation">
			<view class="item flex align-item_center" @click.stop="details(item)">
				<image src="https://ryyf.wangjintech.cn/static/image/stragy/2.png" />
				<text>{{props.item.commentCount}}</text>
			</view>
			<view class="item flex align-item_center" @click.stop="changeGoodStatus">
				<image v-if="props.item.goodStatus" src="https://ryyf.wangjintech.cn/static/image/stragy/6.png" />
				<image v-else src="https://ryyf.wangjintech.cn/static/image/stragy/4.png" />
				<text>{{props.item.goodCount}}</text>
			</view>
			<view class="item flex align-item_center relative">
				<button class="absolute" open-type="share" @click.stop="shareUser">分享</button>
				<image src="https://ryyf.wangjintech.cn/static/image/stragy/3.png" />
				<text>{{props.item.shareCount}}</text>
			</view>
			<view class="item flex align-item_center" @click.stop="delPost" v-if="props.power">
				<up-icon name="trash-fill" size="38rpx" color="#c12c1f"></up-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import openApi from "@/api/biz/open";
	import dayjs from "dayjs"
	import {
		msg
	} from "@/utils/tool.js"
	import {
		chunkArray
	} from "@/utils/tool.js"
	import {
		computed,
		watch
	} from "vue";
	const props = defineProps({
		showImg: {
			type: Boolean,
			default: false,
		},
		type: {
			type: String,
			default: "default"
		},
		ad: {
			type: Boolean,
			default: false
		},
		power: {
			type: Boolean,
			default: false
		},
		operation: {
			type: Boolean,
			default: true
		},
		right: {
			type: String,
			default: "25rpx"
		},
		size: {
			type: String,
			default: "200rpx"
		},
		item: {
			type: Object,
			default: []
		},
		size: {
			type: String,
			default: "200rpx"
		}
	})

	const emit = defineEmits(["changeGoodStatus", 'del', 'details'])

	const delPost = () => {
		emit("del", {
			id: props.item.id
		})
	}

	function shareUser() {
		openApi.createShareRecord(props.item.id)
	}

	function changeGoodStatus() {
		if (props.item.goodStatus) {
			openApi.deleteGoodRecord(props.item.id).then(res => {
				if (res.code === 0) {
					msg("已取消喜欢")
					emit('changeGoodStatus', props.item.id)
				}
			})
		} else {
			openApi.createGoodRecord(props.item.id).then(res => {
				if (res.code === 0) {
					msg("已设为喜欢")
					emit('changeGoodStatus', props.item.id)
				}
			})
		}
	}

	const togetherImg = (item) => {
		let list = [];
		if (item.fishImg) list = [...item.fishImg.split(',')];
		if (item.gearImg) list = [...list, ...item.gearImg.split(',')];
		if (item.coordinateImg) list = [...list, ...item.coordinateImg.split(',')];
		return list
	}

	function preview(child) {
		uni.previewImage({
			urls: child,
		});
	}


	function details(item) {
		if (props.ad) emit('details', item.id)
		else {
			uni.navigateTo({
				url: "/strategy/details/index?id=" + item.id
			})
		}
	}
</script>

<style scoped lang="scss">
	.rightMedia {
		width: 300rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}

	.Recommended {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 22rpx;
		border-radius: 50%;
		color: #FFFFFF;
		background: linear-gradient(105deg, #0D7BFA 0%, #7E76E3 100%);
	}

	.labor {
		@extend .Recommended;
		width: 80rpx;
		border-radius: 40rpx;
	}

	.operation {
		margin-top: 30rpx;

		.item {
			button {
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				opacity: 0.5;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}


	.imgs {
		&-item {
			margin-top: 25rpx;
			width: 200rpx;
			height: 200rpx;

			image {
				width: inherit;
				height: inherit;
				border-radius: 16rpx;
			}
		}

		// image:not(:first-child) {
		// 	margin-left: 25rpx;
		// }

		// image {
		// 	margin-top: 30rpx;
		// }
	}

	.draftItem {
		padding: 40rpx 20rpx;
		width: 690rpx;
		background: #25223B;
		border-radius: 16rpx;

		.ds {
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 39rpx;
			opacity: 0.8;
			margin-top: 30rpx;
		}

		.time {
			font-weight: 500;
			font-size: 20rpx;
			color: #EDFAFF;
			opacity: 0.5;
			margin-top: 12rpx;
		}

		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>